<template>
	<view class="con">
		<view class="con-top">
			<p>可用余额</p>
			<span class="con-span">
				<text>￥</text>
				<span>{{ userinof.money }}</span>
			</span>
		</view>
		<view class="con-nav">
			<p>充值金额</p>
			<view class="inp">
				￥
				<input v-model="recharge_money" type="text" placeholder="请输入充值金额" />
			</view>
			<view class="con-conent">
				<view @click="getmoney(item, index)" :class="index == active ? 'con-banner1' : 'con-banner'" v-for="(item, index) in money" :key="index">
					<view class="con-span">
						<text>￥</text>
						<span>{{ item.money }}</span>
					</view>
					<view class="con-bottom">{{ item.remarks }}</view>
				</view>
				<!-- <view class="top">首冲专享</view> -->
			</view>
		</view>
		<view class="con-footer">
			<p>支付方式</p>
			<view class="bottom">
				<view class="left">
					<image src="../../static/index/images/微信.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<view class="right">
					<u-checkbox-group><u-checkbox @change="checkboxChange" v-model="checked" shape="circle"></u-checkbox></u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="con-botton" @click="Recharge">立即充值</view>
	</view>
</template>

<script>
import { recharge, detail, prepay } from '@/api/api.js';
export default {
	data() {
		return {
			ipt: '',
			userinof: uni.getStorageSync('userinof') || '',
			recharge: uni.getStorageSync('recharge') || '',
			recharge_money: null,
			money: [],
			checked: false,
			active: null,
			list:[]
		};
	},
	onLoad() {
		this.userinof = JSON.parse(JSON.stringify(this.userinof));
		this.money = this.recharge.moneys;
	},
	methods: {
		async Recharge() {
			if (this.recharge_money <= 0) {
				this.$u.toast('请选择或输入充值金额');
				return;
			}
			if (this.checked == false) {
				this.$u.toast('请选择支付方式');
				return;
			}
			let data = {
				recharge_money: this.recharge_money
			};
			let hh = await recharge(data);
			this.list=hh.data
			if (hh.code === 1) {
				this.getpay()
			}
			// console.log(ress);
		},
		async getpay() {
			let ress = await detail({ id: this.list.id });
			if (ress.code == 1) {
				let prepaydata = { order_sn: ress.data.order_sn, payment: 'wechat' };
				console.log(prepaydata);
				let reslove = await prepay(prepaydata);
				console.log(reslove);
			}
		},
		getmoney(item, id) {
			this.recharge_money = item.money;
			this.active = id;
		},
		checkboxChange(e) {
			this.checked = e.value;
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.con {
	width: 100%;
	padding-bottom: 40rpx;
	.con-top {
		width: 100%;
		height: 292rpx;
		background: url('../../static/index/images/背景@2x.png') no-repeat;
		background-size: 100% 100%;
		background-color: #001b0a;
		p {
			font-size: 28rpx;
			font-family: Noto Sans SC-Regular, Noto Sans SC;
			font-weight: 400;
			color: #ffffff;
			padding-top: 64rpx;
			padding-left: 54rpx;
		}
		.con-span {
			padding-left: 50rpx;
			text {
				font-size: 28rpx;
				font-family: Noto Sans SC-Regular, Noto Sans SC;
				font-weight: 400;
				color: #ffffff;
				margin-right: 16rpx;
			}
			span {
				font-size: 72rpx;
				font-family: Noto Sans SC-Medium, Noto Sans SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
	.con-nav {
		width: 750rpx;
		height: 638rpx;
		background: #ffffff;
		border-radius: 72rpx 72rpx 16rpx 16rpx;
		opacity: 1;
		margin-top: -72rpx;
		padding: 36rpx 32rpx 0;
		p {
			font-size: 32rpx;
			font-family: Source Han Sans SC-Bold, Source Han Sans SC;
			font-weight: bold;
			color: #333333;
		}
		.inp {
			width: 686rpx;
			height: 82rpx;
			background: #f1f1f1;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin-top: 32rpx;
			padding-left: 32rpx;
			padding-top: 20rpx;
			display: flex;
		}
		.con-conent {
			margin-top: 72rpx;
			text-align: center;
			display: flex;
			flex-wrap: wrap;
			.con-banner {
				width: 336rpx;
				height: 148rpx;
				background: #f1f1f1;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				margin-right: 14rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				.con-span {
					// padding-left: 50rpx;
					width: 336rpx;
					text-align: center;
					padding-top: 16rpx;
					text {
						font-size: 28rpx;
						font-family: Noto Sans SC-Regular, Noto Sans SC;
						font-weight: 400;
						color: #384d40;
						margin-right: 16rpx;
					}
					span {
						font-size: 56rpx;
						font-family: Source Han Sans SC-Regular, Source Han Sans SC;
						font-weight: 400;
						color: #384d40;
					}
				}
				.con-bottom {
					width: 320rpx;
					font-size: 24rpx;
					font-family: Source Han Sans SC-Light, Source Han Sans SC;
					font-weight: 300;
					color: #384d40;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// background: red;
					margin: 0 auto;
					text-align: center;
				}
			}
			.con-banner1 {
				width: 334rpx;
				height: 146rpx;
				background: #fff5ef;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #ff8745;
				margin-right: 14rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				.con-span {
					// padding-left: 50rpx;
					width: 336rpx;
					text-align: center;
					padding-top: 16rpx;
					text {
						font-size: 28rpx;
						font-family: Noto Sans SC-Regular, Noto Sans SC;
						font-weight: 400;
						color: #384d40;
						margin-right: 16rpx;
					}
					span {
						font-size: 56rpx;
						font-family: Source Han Sans SC-Regular, Source Han Sans SC;
						font-weight: 400;
						color: #384d40;
					}
				}
				.con-bottom {
					width: 320rpx;
					font-size: 24rpx;
					font-family: Source Han Sans SC-Light, Source Han Sans SC;
					font-weight: 300;
					color: #384d40;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// background: red;
					margin: 0 auto;
					text-align: center;
				}
			}
			.con-banner1:nth-child(2n) {
				margin-right: 0;
			}
			.con-banner:nth-child(2n) {
				margin-right: 0;
			}
			.top {
				width: 148rpx;
				height: 44rpx;
				background: linear-gradient(90deg, #ff4545 0%, #ff8845 100%);
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				opacity: 1;
				font-size: 24rpx;
				font-family: Source Han Sans SC-Regular, Source Han Sans SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	.con-footer {
		width: 100%;
		height: 266rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin-top: 16rpx;
		padding: 38rpx 32rpx 0;
		p {
			font-size: 32rpx;
			font-family: Source Han Sans SC-Bold, Source Han Sans SC;
			font-weight: bold;
			color: #333333;
		}
		.bottom {
			padding-top: 42rpx;
			display: flex;
			.left {
				width: 90%;
				height: 64rpx;
				line-height: 64rpx;
				image {
					width: 64rpx;
					height: 64rpx;
					vertical-align: middle;
					margin-right: 16rpx;
				}
				text {
					font-size: 28rpx;
					font-family: Source Han Sans SC-Medium, Source Han Sans SC;
					font-weight: 500;
					color: #001b0a;
				}
			}
			.right {
				width: 48rpx;
				padding-top: 20rpx;
				// padding-left: 20rpx;
				// height: 64rpx;
				// line-height: 64rpx;
			}
		}
	}
	.con-botton {
		width: 686rpx;
		height: 96rpx;
		background: #001b0a;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC-Bold, Source Han Sans SC;
		font-weight: bold;
		color: #ffffff;
		margin: 96rpx 32rpx;
		text-align: center;
		line-height: 96rpx;
	}
}
</style>
